<template>
  <view v-show="showView" class="content">
    <view :style="{ top: topheight - 26 + 'px' }" style="z-index: 999" class="logo1" v-if="isShowYZLogo"> 打造您的数字分身 </view>
    <image :style="{ top: topheight - 26 + 'px' }" class="logo" style="z-index: 999" src="/static/index/lq_logo.jpg" mode="widthFix" v-else-if="isShowLQLogo"> </image>
    <image :style="{ top: topheight - 26 + 'px' }" class="logo2" style="z-index: 999" src="/static/index/jk_logo.png" mode="widthFix" v-else-if="isShowJkLogo"> </image>
    <view :style="{ top: topheight - 26 + 'px' }" style="z-index: 999" class="logo1" v-else>
      {{ oemName }}
    </view>
    <view class="video-box">
      <!-- <video class="play"
             :object-fit="cover"
             :loop="true"
             :controls="false"
             :autoplay="true"
             src="https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/index.mp4"></video> -->
      <!-- <image class="" style="width: 750rpx; height: 100%" src="/static//index/index.jpg"> </image> -->
      <image class="" style="width: 750rpx; height: 100%" :src="'https://oop-zl-szr.oss-cn-hangzhou.aliyuncs.com/static/oem/' + bannerUrl + '.jpg'"> </image>
      <image class="" style="width: 510rpx; height: 100rpx; position: absolute; bottom: -2rpx; left: 50%; transform: translate(-50%)" src="/static/aiCreate/btn_home_main_bg.png"> </image>
      <view class="createBtn zl-flex zl-row-center zl-col-center" @click="create_video()">
        <image class="zl-m-r-20" style="width: 44rpx; height: 44rpx" src="/static/aiCreate/icon_home_main.png"> </image>
        <view class="zl-font-32 zl-color-000 zl-font-600">创建数字人视频</view>
      </view>
    </view>
    <view class="opt-box">
      <view class="zl-p-t-30 zl-flex zl-row-center" style="gap: 20rpx">
        <view class="zl-flex-col zl-row-center btn" @click="clonePeople()">
          <image class="" style="width: 45rpx; height: 45rpx; margin-bottom: 10rpx" src="/static/aiCreate/icon_shuzi_image.png"> </image>
          <text style="color: #ffffff">形象克隆</text>
        </view>
        <view class="zl-flex-col zl-row-center btn" @click="cloneVoice()">
          <image class="" style="width: 45rpx; height: 45rpx; margin-bottom: 10rpx" src="/static/aiCreate/icon_shuzi_video.png"> </image>
          <text style="color: #ffffff">声音克隆</text>
        </view>
      </view>
      <view class="zl-m-t-30 zl-m-b-30 zl-flex zl-row-center" style="gap: 20rpx">
        <image class="" style="width: 40rpx; height: 20rpx" src="/static/aiCreate/icon_title_left.png"> </image>
        <text class="zl-font-36 zl-font-600 zl-color-white">AI模型工具</text>
        <image class="" style="width: 40rpx; height: 20rpx" src="/static/aiCreate/icon_title_right.png"> </image>
      </view>
      <view class="jbList">
        <view v-for="(item, index) in jbList1" :key="index" class="jbBtn" :style="{ background: item.color }" @click="toAi(item)">
          <image :src="item.icon" style="width: 80rpx; height: 80rpx; margin-right: 20rpx"></image>
          <text class="name">{{ item.name }}</text>
        </view>
      </view>
      <view class="zl-m-t-30 zl-m-b-30 zl-flex zl-row-center" style="gap: 20rpx">
        <image class="" style="width: 40rpx; height: 20rpx" src="/static/aiCreate/icon_title_left.png"> </image>
        <text class="zl-font-36 zl-font-600 zl-color-white">AI营销模版</text>
        <image class="" style="width: 40rpx; height: 20rpx" src="/static/aiCreate/icon_title_right.png"> </image>
      </view>
      <!-- <view class="zl-flex zl-row-around">
        <image @click="clonePeople()"
               style="width: 210rpx;"
               src="/static/index/btn2.png"
               mode="widthFix">
        </image>
        <image @click="cloneVoice()"
               style="width: 210rpx;"
               src="/static/index/btn3.png"
               mode="widthFix">
        </image>
        <image @click="create_AIList()"
               style="width: 210rpx;"
               src="/static/index/btn4.png"
               mode="widthFix">
        </image>
      </view> -->
      <!-- <view class="notice_box zl-flex zl-row-center">
        <view class="noticetips"> 电脑端已上线，在电脑上也可以操作啦~ </view>
        <view class="copy_box"
              @click="copy"> 复制链接 </view>
      </view> -->
      <view class="jbList">
        <view v-for="(item, index) in jbList" :key="index" class="jbBtn" :style="{ background: item.color }" @click="toAi(item)">
          <image :src="item.icon" style="width: 80rpx; height: 80rpx; margin-right: 20rpx"></image>
          <text class="name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- <uni-popup ref="aiPopup"
               type="bottom"
               background-color="#fff"
               border-radius="20rpx 20rpx 0rpx 0rpx">
      <view class="name_box zl-flex zl-col-between">
        <view class="title zl-width-100 zl-flex zl-col-between">
          <text class="zl-font-36 zl-font-500"
                style="color: #131415;">请选择类型</text>
        </view>
        <view class="name_line"
              @click="$refs.aiPopup.close()">
          <image src="/static/icon/pop_close.png"
                 style="width: 29rpx;height: 29rpx;margin-right: 20rpx;"></image>
        </view>
      </view>
      <view class=" zl-flex-col zl-col-center zl-m-t-40">
        <view class="zl-flex aiBtn zl-m-b-20 zl-col-between"
              @click="toAi(false)">
          <view class="zl-flex zl-col-center">
            <image src="/static/index/jiaoben.png"
                   style="width: 36rpx;height: 36rpx;margin-right: 20rpx;"></image>
            <text>智能脚本</text>
          </view>
          <image src="/static/icon/to_right.png"
                 style="width: 13rpx;height: 26rpx;"></image>
        </view>
        <view class="zl-flex aiBtn zl-col-between "
              @click="toAi(true)">
          <view class="zl-flex zl-col-center">
            <image src="/static/index/wenda.png"
                   style="width: 36rpx;height: 36rpx;margin-right: 20rpx"></image>
            <text>AI问答</text>
          </view>
          <image src="/static/icon/to_right.png"
                 style="width: 13rpx;height: 26rpx;"></image>
        </view>
      </view>
    </uni-popup> -->

    <uni-popup :animation="false" ref="popup" type="center" background-color="#fff" border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center">
        <image style="width: 300rpx" src="/static/clone/VIP_pass.png" mode="widthFix"></image>
        <view class="zl-color-000 zl-font-40 zl-font-500 zl-m-t-18"> 您不是VIP会员！ </view>
        <view class="zl-color-666 zl-font-24 zl-m-t-30"> 您暂时没有相关功能的操作权限，请开通VIP后再使用相关功能！ </view>
        <view @click="renew()" class="btn zl-m-t-66 surebtn"> 卡密激活VIP会员 </view>
        <view class="btn zl-m-t-32 cancelbtn" @click="$refs.popup.close()"> 关闭 </view>
      </view>
    </uni-popup>
    <uni-popup ref="popup2" type="dialog">
      <uni-popup-dialog ref="inputClose" mode="input" title="卡密激活" v-model="cdkey" placeholder="请输入卡密" @confirm="submitCdkey"></uni-popup-dialog>
    </uni-popup>
    <uni-popup :animation="false" ref="popup3" type="center" background-color="#fff" border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center">
        <image style="width: 120rpx" src="/static/icon/fail.png" mode="widthFix"></image>
        <view class="zl-color-000 zl-font-40 zl-font-600 zl-m-t-36">暂无法创作视频！</view>
        <view class="zl-color-666 zl-font-24 zl-m-t-40">
          系统检测到您未完成
          <text style="color: #eb5e00">形象克隆</text>
          请先完成克隆再来创作数字分身视频！
        </view>
        <view @click="clonePeople()" class="btn zl-m-t-66 zl-theme-btn">前往形象克隆 </view>
        <!-- <view class="btn zl-m-t-32 zl-theme-btn" @click="cloneVoice()"> 前往声音克隆 </view> -->
      </view>
      <image @click="$refs.popup3.close()" style="width: 80rpx; margin-top: 70rpx; margin-left: 260rpx" src="/static/icon/close-w.png" mode="widthFix"></image>
    </uni-popup>
    <uni-popup :animation="false" ref="popup4" type="center" background-color="#fff" border-radius="20rpx 20rpx 20rpx 20rpx" :is-mask-click="false">
      <view class="tip-box zl-flex-col zl-col-center">
        <view class="zl-color-000 zl-font-34 zl-font-bold zl-width-100 zl-text-center" style="position: relative">
          <image style="width: 115rpx; height: 115rpx; position: absolute; top: -90rpx; left: 50%; transform: translateX(-50%)" src="/static/new/icon_pop_tips.png" mode=""></image>
          <image src="/static/new/icon_pop_title.png" mode="" style="width: 200rpx; height: 40rpx; margin-top: 50rpx"></image>
        </view>
        <view class="zl-color-000 zl-font-26 zl-m-t-30 scroll-box">
          <text style="font-weight: 500; font-size: 28rpx; color: #333333; line-height: 52rpx; text-indent: 56rpx; display: inline-block">
            为了响应关于AI深度合成技术的实名要求，主要涉及内容标识、责任追溯及合规管理等方面的规定。将上线数字形象授权功能，用户历史创建和新创建的数字人分身，都需要提交本人录制的授权视频。平台比对形象授权通过后才可以进行视频合成。无授权视频的将无法进行数字人视频合成功能。这一措施旨在减少恶意滥用，并为后续追责提供依据。
          </text>
          <view style="color: #eb5e00; font-weight: 700; font-size: 28rpx; margin-top: 10rpx; text-indent: 56rpx">
            <!-- 如果数字分身形象后续不再使用，删除后此提示不再显示！ -->
            如需不再显示此提示，完成上传所有数字分身的授权视频，或者删除不再使用的数字分身！
          </view>
        </view>
        <view class="btn zl-m-t-42 zl-theme-btn" @click="$refs.popup4.close()"> 我知道了 </view>
      </view>
    </uni-popup>
    <PrivacyPoup></PrivacyPoup>
  </view>
</template>
<script>
import PrivacyPoup from '@/components/PrivacyPoup.vue'
export default {
  components: {
    PrivacyPoup
  },
  data() {
    return {
      isShowJkLogo: getApp().globalData.isShowJkLogo,
      oemName: getApp().globalData.oemName,
      isShowYZLogo: getApp().globalData.isShowYZLogo,
      isShowLQLogo: getApp().globalData.isShowLQLogo,
      bannerUrl: getApp().globalData.bannerUrl,
      appid: getApp().globalData.appid,
      topheight: '',
      menuButtonHeight: '',
      titleBarHeight: '',
      balanceInfo: {
        userId: 0,
        digitalCount: 0,
        maxDigitalCount: 0,
        voiceCount: 0,
        maxVoiceCount: 0,
        produceCount: 0,
        maxProduceCount: 0,
        endTime: 0
      },
      showView: false,
      cdkey: '',
      voiceCount: 0,
      peopleCount: 0,
      jbList: [],
      jbList1: []
    }
  },
  onShareAppMessage(res) {
    return {
      title: getApp().globalData.shareTitle,
      imageUrl: getApp().globalData.shareImg,
      path: '/pages/index/index'
    }
  },
  async onLoad() {
    await this.$onLaunched
    this.getway()
    getApp().globalData.isReload = false
    this.topheight = getApp().globalData.topBarHeight
    this.menuButtonHeight = getApp().globalData.menuButtonHeight
    this.titleBarHeight = getApp().globalData.titleBarHeight
    this.gettemplatetype()
    this.gettemplatetype1()
  },
  async onShow() {
    await this.$onLaunched
    this.getassetamount()
  },
  methods: {
    getway() {
      this.api.clone
        .getway()
        .then((res) => {
          if (res.code === 0) {
            if (res.data.isNotDigitalAuth) {
              this.$refs.popup4.open()
            }
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    gettemplatetype() {
      this.api.aichat
        .gettemplatetype({
          group: 1
        })
        .then((res) => {
          if (res.code === 0) {
            this.jbList = res.data
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    gettemplatetype1() {
      this.api.aichat
        .gettemplatetype({
          group: 2
        })
        .then((res) => {
          if (res.code === 0) {
            const list = [
              {
                name: 'DeepSeek',
                icon: '/static/aiCreate/deepseek.jpg',
                color: '#383545'
              }
            ]
            this.jbList1 = res.data
            this.jbList1 = list.concat(this.jbList1)
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    },
    copy() {
      const url = getApp().globalData.url
      this.$util.copy(url)
    },
    // 获取账号资源总计
    getassetamount() {
      this.api.account
        .getassetamount()
        .then((res) => {
          if (res.code === 0) {
            this.balanceInfo = res.data
            this.showView = true
          } else {
            this.$util.msg(res.msg)
            this.showView = true
          }
        })
        .catch((err) => {
          this.$util.msg(err)
          // this.$util.msg('请检查网络连接！');
        })
    },
    getvoicemodellist() {
      return new Promise((resolve, reject) => {
        this.api.clone
          .getvoicemodellist({
            page: 1,
            limit: 1,
            status: 0
          })
          .then((res) => {
            if (res.code === 0) {
              resolve(res.data.total)
            } else {
              // this.$util.msg(res.msg);
              resolve(0)
            }
          })
          .catch((err) => {
            // this.$util.msg(res.msg);
            resolve(1)
          })
      })
    },
    getdigitalmodellist() {
      return new Promise((resolve, reject) => {
        this.api.clone
          .getdigitalmodellist({
            page: 1,
            limit: 1,
            status: 0
          })
          .then((res) => {
            if (res.code === 0) {
              resolve(res.data.total)
            } else {
              // this.$util.msg(res.msg);
              resolve(0)
            }
          })
          .catch((err) => {
            // this.$util.msg(res.msg);
            resolve(1)
          })
      })
    },
    //形象克隆
    clonePeople() {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (this.balanceInfo.digitalCount <= 0 && this.balanceInfo.digitalCount !== -99999999) {
        return this.$util.msg('请前往个人中心充值配额！')
      }
      this.$refs.popup3.close()
      uni.navigateTo({
        url: '/pages/clone/people'
      })
    },
    //声音克隆
    cloneVoice() {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (this.balanceInfo.voiceCount <= 0 && this.balanceInfo.voiceCount !== -99999999) {
        return this.$util.msg('请前往个人中心充值配额！')
      }
      this.$refs.popup3.close()
      uni.navigateTo({
        url: '/pages/clone/voice'
      })
    },
    //创建数字人视频
    async create_video() {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (this.balanceInfo.produceCount <= 0) {
        return this.$util.msg('请前往个人中心充值配额！')
      }
      // this.voiceCount = await this.getvoicemodellist();
      this.peopleCount = await this.getdigitalmodellist()
      // if (this.peopleCount <= 0) {
      //   this.$refs.popup3.open()
      //   return
      // }
      uni.navigateTo({
        url: '/pages/create/video'
      })
    },
    create_voice() {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      uni.navigateTo({
        url: '/pages/create/voice'
      })
    },
    //智能脚本
    create_AIList() {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      this.$refs.aiPopup.open()
      // uni.navigateTo({
      // 	url: '/pages/create/addAI'
      // })
    },
    toAi(item) {
      if (!this.balanceInfo.endTime) {
        this.$refs.popup.open()
        return
      }
      if (item.name === 'DeepSeek') {
        uni.navigateTo({
          url: '/pages/ai_chat/ai_chat'
        })
      } else {
        uni.navigateTo({
          url: '/pages/aiCreate/index?type=' + item.type + '&title=' + item.name
        })
      }
      // this.$refs.aiPopup.close()
    },
    // 续费
    renew() {
      this.cdkey = ''
      this.$refs.popup2.open()
    },
    // 激活卡密
    submitCdkey() {
      // 激活卡密
      if (!this.cdkey) {
        this.$util.msg('请输入店铺激活码！')
        return
      }
      this.api.account
        .usecdkey({
          cdkey: this.cdkey
        })
        .then((res) => {
          if (res.code === 0) {
            this.$refs.popup.close()
            this.$refs.popup2.close()
            this.cdkey = ''
            this.$util.msg(res.msg)
            this.getassetamount()
          } else {
            this.$util.msg(res.msg)
          }
        })
        .catch((err) => {
          this.$util.msg('请检查网络连接！')
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.name_box {
  width: 750rpx;
  margin: 0 auto;
  padding: 0 30rpx;
  border-bottom: 1px solid #ddd;

  .title {
    height: 120rpx;

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.logo1 {
  position: absolute;
  top: 0;
  left: 42rpx;
  width: 353rpx;
  color: #fff;
  font-weight: 700;
  transform: skew(-10deg);
}

.logo2 {
  position: absolute;
  top: 0;
  left: 42rpx;
  width: 360rpx;
}

.logo {
  position: absolute;
  top: 0;
  left: 42rpx;
  width: 213rpx;
}

.tip-box {
  position: relative;
  width: 600rpx;
  background: #ffffff;
  border-radius: 18rpx;
  padding: 38rpx 60rpx 68rpx;
  z-index: 9999;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400rpx;
  height: 88rpx;
  border-radius: 44rpx;
}

.surebtn {
  background: #000;
  font-weight: 600;
  font-size: 28rpx;
  color: #fff;
}

.cancelbtn {
  background: #eeeeee;
  font-weight: 600;
  font-size: 28rpx;
  color: #000;
}

.video-box {
  // position: absolute;
  // top: 0;
  // left: 0;
  // width: 100vw;
  // height: 100vh;
  // z-index: -1;
  // overflow: hidden;
  position: relative;
  width: 750rpx;
  height: 600rpx;
  background: linear-gradient(180deg, rgba(0, 225, 255, 0.21) 0%, #181818 100%);

  // .play {
  //   width: 100vw;
  //   height: 1624rpx;
  //   z-index: -3;
  // }
  .createBtn {
    position: absolute;
    bottom: -2rpx;
    left: 50%;
    transform: translate(-50%);
    width: 510rpx;
    height: 100rpx;
    border-radius: 50rpx;
    // z-index: 999;
  }
  .createBtn1 {
    position: absolute;
    bottom: -2rpx;
    left: 50%;
    transform: translate(-50%);
    width: 330rpx;
    height: 88rpx;
    border-radius: 50rpx;
    // z-index: 999;
  }
}

.opt-box {
  width: 100%;
  min-height: calc(100vh - 600rpx);
  background-color: #181818;
  padding-bottom: 30rpx;

  .btn {
    width: 335rpx;
    height: 120rpx;
    border-radius: 20rpx;
    background-color: #313536;
    border: 2rpx solid #4c4e4e;
  }
}

.notice_box {
  height: 80rpx;
  height: 100%;

  .noticeIcon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .noticetips {
    font-size: 24rpx;
    color: #ffdc00;
  }

  .copy_box {
    width: 128rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 32rpx;
    border: 2rpx solid #fadd02;
    text-align: center;
    font-size: 22rpx;
    color: #ffdc00;
    margin-left: 10rpx;
  }
}

.aiBtn {
  width: 690rpx;
  height: 90rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  border: 1rpx solid #e4e4e4;
  padding: 27rpx 30rpx;
  font-size: 30rpx;
  justify-content: space-between;
}

.jbList {
  display: flex;
  // justify-content: center;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 0 30rpx;

  .jbBtn {
    width: 335rpx;
    height: 120rpx;
    padding: 20rpx;
    background: #3b4450;
    border-radius: 20rpx;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    .name {
      font-weight: 600;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
}
</style>
